<template>
  <view class="detail-page">
    <!-- 首页：大图+场馆信息 -->
    <block v-if="currentPage === 0">
      <!-- 首页主图，展示场馆封面 -->
      <image class="main-img-full" :src="getHomeImage()" mode="aspectFill" @error="onImgError"/>
      <!-- GIF动画图片 -->
      <image class="gif-animation" src="/static/kk.gif" mode="aspectFit" />
      <!-- 右上角关闭按钮 -->
      <image class="close-btn" src="/static/close.png" @click="goHome" />
      <!-- 底部手势提示 -->
      <image class="hand-img" src="/static/hand.png" />
      <image class="up-img" src="/static/up.png" />
    </block>
    <!-- 第2页：first_page 图文介绍 -->
    <block v-else-if="currentPage === 1">
      <image class="detail-bg" src="/static/bj.jpg" mode="aspectFill"/>
      <view class="detail-content">
        <!-- 文字介绍 -->
        <view class="detail-text">{{ data.firstPageInfo }}</view>
        <!-- 相关图片 -->
        <image class="detail-img" :src="data.firstPageImage" mode="aspectFit" @error="onImgError" @load="onImgLoad"/>
      </view>
      <image class="close-btn" src="/static/close.png" @click="goHome" />
      <image class="hand-img" src="/static/hand.png" />
      <image class="up-img" src="/static/up.png" />
    </block>
    <!-- 第3页：second_page 图文介绍 -->
    <block v-else-if="currentPage === 2">
      <image class="detail-bg" src="/static/bj.jpg" mode="aspectFill"/>
      <view class="detail-content">
        <view class="detail-text">{{ data.secondPageInfo }}</view>
        <image class="detail-img" :src="data.secondPageImage" mode="aspectFit" @error="onImgError" @load="onImgLoad"/>
      </view>
      <image class="close-btn" src="/static/close.png" @click="goHome" />
      <image class="hand-img" src="/static/hand.png" />
      <image class="up-img" src="/static/up.png" />
    </block>
    <!-- 第4页：third_page 图文介绍 -->
    <block v-else-if="currentPage === 3">
      <image class="detail-bg" src="/static/bj.jpg" mode="aspectFill"/>
      <view class="detail-content">
        <view class="detail-text">{{ data.thirdPageInfo }}</view>
        <image class="detail-img" :src="data.thirdPageImage" mode="aspectFit" @error="onImgError" @load="onImgLoad"/>
      </view>
      <image class="close-btn" src="/static/close.png" @click="goHome" />
      <image class="hand-img" src="/static/hand.png" />
      <image class="up-img" src="/static/up.png" />
    </block>
    <!-- 第5页：视频页面 -->
    <block v-else>
      <!-- 视频播放，展示场馆相关视频介绍 -->
      <video id="mainVideo" :src="data.venueVideo" class="detail-video" controls autoplay muted poster="/static/logo.jpg" @error="onVideoError" @load="onVideoLoad"/>
    </block>
    <!-- 全局滑动遮罩，捕获上下滑动手势切换页面 -->
    <view class="swipe-mask" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></view>
    <!-- 视频页返回按钮，左上角圆形按钮 -->
    <view v-if="currentPage >= 4" class="video-back-btn" @click.stop="goScan">
      <image src="/static/arrow-left.png" class="back-btn-icon" />
    </view>
  </view>
</template>

<script>
import { identifyImages } from '@/api/recognition.js';
export default {
  data() {
    return {
      // 交互相关状态
      startY: 0, // 触摸起始Y坐标
      deltaY: 0, // 滑动距离
      isSwiping: false, // 是否正在滑动
      moveY: 0, // 备用滑动距离
      currentPage: 0, // 当前页码
      type: 'xingshi', // 当前类型
      // 场馆数据结构，后端接口返回
      data: {
        homeImage: '', // 首页主图
        firstPageInfo: '', // 第二页文字
        firstPageImage: '', // 第二页图片
        secondPageInfo: '', // 第三页文字
        secondPageImage: '', // 第三页图片
        thirdPageInfo: '', // 第四页文字
        thirdPageImage: '', // 第四页图片
        venueVideo: '' // 视频页
      }
    }
  },
  computed: {
    // 判断是否为最后一页（视频页）
    isLastPage() {
      return this.currentPage === 4
    }
  },
  onLoad(options) {
    // 页面加载，获取参数，通常会请求后端接口获取data
    this.currentPage = Number(options.page) || 0
    this.type = options.type || 'xingshi';
    // 如果有识别结果参数，直接赋值
    if (options.data) {
      try {
        this.data = JSON.parse(decodeURIComponent(options.data));
        // 处理后端返回的图片数据
        this.processImageData();
        // 检查初始数据
        this.checkCurrentPageData();
      } catch (e) {
        // 解析失败可忽略，回退为默认逻辑
        console.error('数据解析失败：', e);
      }
    }
    // 建议后端接口返回的数据直接赋值给this.data
    // 例如：uni.request({ url: `/api/venue/${options.id}`, success: (res) => this.data = res.data });
  },
  methods: {
    // 处理后端返回的图片数据
    processImageData() {
      console.log('处理图片数据：', this.data);
      
      // 确保图片字段存在，如果后端没有返回则使用默认值
      if (!this.data.firstPageImage) {
        console.log('第2页图片为空，使用默认图片');
        this.data.firstPageImage = '/static/bj.jpg'; // 第2页默认图片
      }
      if (!this.data.secondPageImage) {
        console.log('第3页图片为空，使用默认图片');
        this.data.secondPageImage = '/static/bj.jpg'; // 第3页默认图片
      }
      if (!this.data.thirdPageImage) {
        console.log('第4页图片为空，使用默认图片');
        this.data.thirdPageImage = '/static/bj.jpg'; // 第4页默认图片
      }
      
      // 确保视频字段存在，如果后端没有返回则使用默认值
      if (!this.data.venueVideo) {
        console.log('视频为空，使用默认视频');
        this.data.venueVideo = this.getDefaultVideo();
      }
      
      // 如果后端返回的是相对路径，需要拼接完整的URL
      if (this.data.firstPageImage && !this.data.firstPageImage.startsWith('http') && !this.data.firstPageImage.startsWith('/static')) {
        this.data.firstPageImage = `http://101.43.19.62${this.data.firstPageImage}`;
      }
      if (this.data.secondPageImage && !this.data.secondPageImage.startsWith('http') && !this.data.secondPageImage.startsWith('/static')) {
        this.data.secondPageImage = `http://101.43.19.62${this.data.secondPageImage}`;
      }
      if (this.data.thirdPageImage && !this.data.thirdPageImage.startsWith('http') && !this.data.thirdPageImage.startsWith('/static')) {
        this.data.thirdPageImage = `http://101.43.19.62${this.data.thirdPageImage}`;
      }
      if (this.data.venueVideo && !this.data.venueVideo.startsWith('http') && !this.data.venueVideo.startsWith('/static')) {
        this.data.venueVideo = `http://101.43.19.62${this.data.venueVideo}`;
      }
      
      console.log('处理后的数据：', {
        firstPageImage: this.data.firstPageImage,
        secondPageImage: this.data.secondPageImage,
        thirdPageImage: this.data.thirdPageImage,
        venueVideo: this.data.venueVideo
      });
    },
    // 获取默认视频
    getDefaultVideo() {
      // 根据类型返回对应的默认视频
      switch (this.type) {
        case 'xingshi':
          return 'https://example.com/videos/xingshi.mp4'; // lion默认视频
        case 'wulong':
          return 'https://example.com/videos/wulong.mp4'; // dargion默认视频
        case 'longzhou':
          return 'https://example.com/videos/longzhou.mp4'; // 龙舟默认视频
        default:
          return 'https://example.com/videos/default.mp4'; // 默认视频
      }
    },
    // 获取首页背景图
    getHomeImage() {
      // 完全根据后端返回的识别结果来确定主图
      if (this.data.homeImage) {
        // 如果后端返回的是相对路径，需要拼接完整的URL
        if (!this.data.homeImage.startsWith('http') && !this.data.homeImage.startsWith('/static')) {
          return `http://101.43.19.62${this.data.homeImage}`;
        }
        return this.data.homeImage;
      }
      
      // 如果后端没有返回首页图片，则使用默认背景图
      return '/static/bj.jpg';
    },
    // 检查当前页面数据
    checkCurrentPageData() {
      console.log('当前页面：', this.currentPage);
      console.log('当前类型：', this.type);
      console.log('当前页面数据：', {
        firstPageInfo: this.data.firstPageInfo,
        firstPageImage: this.data.firstPageImage,
        secondPageInfo: this.data.secondPageInfo,
        secondPageImage: this.data.secondPageImage,
        thirdPageInfo: this.data.thirdPageInfo,
        thirdPageImage: this.data.thirdPageImage,
        venueVideo: this.data.venueVideo
      });
    },
    // 触摸滑动相关方法
    touchStart(e) {
      this.startY = e.touches[0].clientY
      this.deltaY = 0
      this.isSwiping = true
    },
    touchMove(e) {
      if (!this.isSwiping) return
      this.deltaY = e.touches[0].clientY - this.startY
    },
    touchEnd(e) {
      if (!this.isSwiping) return
      
      // 向上滑动（负值）切换到下一页
      if (this.deltaY < -30) {
        this.nextPage()
      }
      // 向下滑动（正值）返回上一页
      else if (this.deltaY > 30) {
        this.prevPage()
      }
      
      this.isSwiping = false
      this.startY = 0
      this.deltaY = 0
    },
    // 切换到下一页
    nextPage() {
      if (this.currentPage < 4) {
        this.currentPage++
        this.checkCurrentPageData(); // 检查新页面的数据
      } else {
        uni.reLaunch({ url: '/pages/index/index' })
      }
    },
    // 返回上一页
    prevPage() {
      if (this.currentPage > 0) {
        this.currentPage--
      } else {
        // 如果是第一页，返回扫码页
        uni.redirectTo({ url: '/pages/scan/index' })
      }
    },
    // 返回拍摄页
    goHome() {
      uni.redirectTo({ url: '/pages/scan/index' })
    },
    // 返回扫码页
    goScan() {
      uni.redirectTo({ url: '/pages/scan/index' })
    },
    // 图片加载失败处理
    onImgError(e) {
      console.error('图片加载失败：', e);
      console.error('图片路径：', e.target.src);
      uni.showToast({ title: '图片加载失败', icon: 'none' });
    },
    // 图片加载成功处理
    onImgLoad(e) {
      console.log('图片加载成功：', e.target.src);
    },
    // 视频加载失败处理
    onVideoError(e) {
      console.error('视频加载失败：', e);
      console.error('视频路径：', e.target.src);
      uni.showToast({ title: '视频加载失败', icon: 'none' });
    },
    // 视频加载成功处理
    onVideoLoad(e) {
      console.log('视频加载成功：', e.target.src);
    }
  }
}
</script>

<style scoped>
/* 页面基础布局 */
.detail-page { 
  width: 100vw; 
  height: 100vh; 
  position: relative; 
  background: #fff; 
  overflow: hidden; 
  font-family: "华文楷体", "楷体", "宋体", "SimKai", "SimSun", "Microsoft YaHei", "微软雅黑", serif;
}
.detail-bg { width: 100vw; height: 100vh; position: absolute; left: 0; top: 0; z-index: 1; object-fit: cover; }
.main-img-full { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1; object-fit: cover; }
.gif-animation {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300rpx;
  height: 300rpx;
  z-index: 10;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.3);
}



/* 内容区样式 */
.detail-content { position: relative; z-index: 2; width: 100vw; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.detail-text {
  width: 90vw;
  margin: 0 auto;
  margin-top: 200rpx;
  font-size: 36rpx;
  color: #000;
  text-align: center;
  background: transparent;
  border-radius: 12rpx;
  padding: 24rpx;
  font-weight: bold;
  text-shadow: 1rpx 1rpx 2rpx rgba(255,255,255,0.8);
  letter-spacing: 3rpx;
  font-family: "华文楷体", "楷体", "宋体", "SimKai", "SimSun", "Microsoft YaHei", "微软雅黑", serif;
  line-height: 1.8;
}
.detail-img { 
  width: 90vw; 
  max-height: 60vh; 
  margin: 24rpx auto 0 auto; 
  border-radius: 12rpx; 
  object-fit: contain; 
  z-index: 2; 
  position: relative; 
  background: transparent;
}

/* 按钮与手势提示样式 */
.close-btn, .back-btn {
  position: absolute;
  top: 80rpx;
  right: 40rpx;
  width: 90rpx;
  height: 90rpx;
  z-index: 10000;
  border-radius: 50%;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.12);
  border: 2rpx solid #e74c3c;
  background: transparent;
  font-family: "华文楷体", "楷体", "宋体", "SimKai", "SimSun", "Microsoft YaHei", "微软雅黑", serif;
}
.back-btn { left: 40rpx; right: auto; }
.hand-img { position: absolute; bottom: 120rpx; left: 50%; transform: translateX(-50%); width: 90rpx; height: 91rpx; z-index: 3; }
.up-img { position: absolute; bottom: 40rpx; left: 50%; transform: translateX(-50%); width: 48rpx; height: 80rpx; z-index: 3; }

/* 视频与滑动遮罩样式 */
.detail-video { width: 100vw; height: 100vh; object-fit: cover; z-index: 1; }
.swipe-mask { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 9999; background: transparent; pointer-events: auto; }

/* 视频页返回按钮样式 */
.video-back-btn {
  position: fixed;
  top: 80rpx;
  left: 40rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.15);
  border: 2rpx solid #27ae60;
  z-index: 10002;
  pointer-events: auto;
  font-family: "华文楷体", "楷体", "宋体", "SimKai", "SimSun", "Microsoft YaHei", "微软雅黑", serif;
}
.back-btn-icon {
  width: 60rpx;
  height: 60rpx;
}
</style>